<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<title>热门文章</title>
	<link rel="stylesheet" th:href="@{./css/bootstrap.min.css}">
	<script th:src="@{./js/jquery-3.4.1.min.js}"></script>
	<script th:src="@{./js//bootstrap.min.js}"></script>
</head>
<style>
	.intro {
		/* width: 100%; */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	a:hover{text-decoration:none}
</style>

<body>
	<div class="container" style="width: 1000px">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle
								navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span
								class="icon-bar"></span></button>
						<a class="navbar-brand" href="#">幸福博客首页</a>
					</div>

					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li >
								<a href="/">首页</a>
							</li>
							<li class="active">
								<a href="/hot">热门文章</a>
							</li>
							<li>
								<a href="/new">最新</a>
							</li>
							<li>
								<a href="#">标签</a>
							</li>
						</ul>
						<form action="/search" method="post" class="navbar-form navbar-left" role="search">
							<div class="form-group">
								<input type="text" name="title" class="form-control"/>
							</div>
							<button type="submit" class="btn btn-default">搜索</button>
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li th:if="${user}==null"  >
								<a href="/loginPage">登录</a>
							</li>
							<li th:if="${user}!=null" >
								<a href="personal">个人中心</a>
							</li>
							<li th:if="${user}!=null" >
								<a th:text="'欢迎：'+${user.username}"> </a>
							</li>
							<li class="dropdown" th:if="${user}!=null" >
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">设置<strong
										class="caret"></strong></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">个人信息</a>
									</li>
									<li>
										<a href="logout">退出</a>
									</li>

								</ul>
							</li>
						</ul>
					</div>

				</nav>

				<div class="row clearfix" style="margin-top: 20px;">
					<div class="col-md-12 column">
						<div class="media" th:each="blog:${blog}">

							<div class="media-body">
								<h4 class="media-heading">
									<a th:href="@{/ViewBlog(id=${blog.id})}"  style="color: rgb(99, 96, 87);;" th:text="${blog.title}"> </a>
								</h4>
								<p class="intro"> <a th:href="@{/ViewBlog(id=${blog.id})}" th:text="${blog.description}" style="color: rgb(99, 96, 87);">  </a> </p>
								<span class="glyphicon glyphicon-user" style="color: rgb(99, 96, 87); margin:0 10px;" th:text="' '+${blog.author}">  </span>
								<span class="glyphicon glyphicon-comment" style="color: rgb(99, 96, 87);margin: 0 10px;float: right;" th:text="' 评论'+${blog.click}"> </span>
								<span class="glyphicon glyphicon-thumbs-up" style="  color: rgb(99, 96, 87);;margin:0 10px;float: right;" th:text="' '+${blog.click}"> </span>
								<span class="glyphicon glyphicon-eye-open" style="color: rgb(99, 96, 87);margin:0 10px;float: right;" th:text="' '+${blog.view}"> </span>
								<span class="glyphicon glyphicon-calendar" style="color: rgb(99, 96, 87);margin: 0 10px;float: right;" th:text="' '+${blog.time}"> </span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>


</body>

</html>